<template>
  <div class="app-container">
    <div class="">
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="标签名称"
              >
                <el-input
                  clearable
                  placeholder="请输入标签名称"
                  v-model="searchForm.name"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>

      <div class="Label">
        <el-row class="">
            <el-col>
              <el-button
                v-hasPermi="'label/add'"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="addClassWay"
                >添加分类</el-button
              >
              <el-button
                v-hasPermi="'label/add'"
                type="warning"
                icon="el-icon-circle-plus-outline"
                @click="addLabel"
                >添加标签</el-button
              >
            </el-col>
          </el-row>
        <!-- <div class="leftLabel">
          <div
            class="each"
            :class="searchForm.category_id == '' ? 'isEach' : ''"
            @click="tagCategoryWay()"
          >
            全部
          </div>
          <div
            :class="searchForm.category_id == item.id ? 'isEach' : ''"
            @click="tagCategoryWay(item.id)"
            v-for="(item, index) in tagCategoryList"
            :key="index"
            class="each"
          >
            {{ item.category_name }}
            <div class="right" @click.stop="">
              <el-popover placement="right" trigger="click">
                <div style="display: flex; justify-content: space-between">
                  <el-popconfirm
                    title="这是一段内容确定删除吗？"
                    @confirm="delClassWay(item)"
                  >
                    <el-button
                      v-hasPermi="'label/del'"
                      type="danger"
                      size="mini"
                      slot="reference"
                    >
                      删除
                    </el-button>
                  </el-popconfirm>
                  <el-button
                    type="primary"
                    size="mini"
                    v-hasPermi="'label/edit'"
                    @click="putClassWay(item)"
                    >编辑</el-button
                  >
                </div>
                <i class="el-icon-more" slot="reference"></i>
              </el-popover>
            </div>
          </div>
        </div> -->

        <div class="rightLabel">

          <el-row>
            <el-col>
              <el-table
                v-loading="loading"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                highlight-current-row
                :data="TagList"
                style="width: 100%"
              >
                <el-table-column
                  align="center"
                  width="130"
                  prop="id"
                  label="ID"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  width="130"
                  prop="category_name"
                  label="所属分类"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="tag_name"
                  label="标签名称"
                >
                <template slot-scope="scope">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.tag_name"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.tag_name ? scope.row.tag_name : "-" }}
                    </div>
                  </el-tooltip>
                </template>
                </el-table-column>

                <el-table-column
                  prop="explain"
                  label="标签说明"
                  min-width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.explain"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.explain ? scope.row.explain : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="userCount"
                  label="标签人数"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="created_at"
                  label="创建时间"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  fixed="right"
                  prop="address"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      v-hasPermi="'label/edit'"
                      style="margin-right: 10px"
                      type="text"

                      @click="puttagsWay(scope.row)"
                    >
                      编辑
                    </el-button>
                    <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="deltagsWay(scope.row)"
                    >
                      <el-button
                        v-hasPermi="'label/del'"
                        type="text"

                        slot="reference"
                      >
                        删除
                      </el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="marginTop" style="text-align: right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="searchForm.count"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-row>
        </div>
      </div>
    </div>
    <!-- <el-dialog
      :title="title"
      :visible.sync="dialogLabel"
      width="600px"
      :before-close="CloseDialogLabel"
    > -->
    <el-drawer
        :modal-append-to-body="false"
        :append-to-body="true"
        title="添加标签"
        size="40%"
        :withHeader="false"
        :visible.sync="dialogLabel"
        @close="CloseDialogLabel"
        :show-close="true"
      >
        <div style="position: relative;margin-bottom: 0px;">
          <div class="drawerTitle">
            <span>添加标签</span>
            <div class="close" @click="CloseDialogLabel">
              <i class="el-icon-close" style="font-size: 24px;"></i>
            </div>
          </div>
        </div>
        <el-alert
          class="warningtips"
          title="用户分组：系统可通过手动管理或条件触发自动给用户打标签,方便平台进行管理及筹划营销活动!"
          type="warning"
          :closable="false"
        >
        </el-alert>
        <el-scrollbar
          wrap-style="overflow-x:hidden;"
          style="height: calc(100vh - 195px)"
        >
      <el-row>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="20">
            <el-form-item label="标签分类" prop="category_id">
              <el-select
                style="width: 100%"
                v-model="ruleForm.category_id"
                placeholder="请选择分类"

              >
                <el-option
                  v-for="item in tagCategoryList"
                  :key="item.id"
                  :label="item.category_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="标签名称" prop="tag_name">
              <el-input
                type="text"
                v-model="ruleForm.tag_name"
                maxlength="10"
                clearable
                show-word-limit
                onkeyup="value =value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"
                placeholder="请输入标签名称"
                autocomplete="off"

              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="标签说明" prop="explain">
              <el-input
                type="textarea"
                maxlength="200"
                clearable
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入标签说明"
                v-model="ruleForm.explain"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
            <el-button @click="CloseDialogLabel">取消</el-button>
            <el-button
              :loading="submitLoading"
              type="primary"
              @click="submitForm('ruleForm')"
              >保存</el-button
            >
          </el-col>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span> -->
   </el-drawer>

    <el-dialog
      :title="classTitle"
      :visible.sync="dialogClass"
      width="600px"
      :before-close="CloseDialogLabel"
    >
      <el-row :gutter="20">
        <el-form
          :model="ruleFormClass"
          status-icon
          :rules="rulesClass"
          ref="rulesClass"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="22">
            <el-form-item label="分类名称" prop="category_name">
              <el-input
                type="text"
                v-model="ruleFormClass.category_name"
                maxlength="10"
                clearable
                show-word-limit
                onkeyup="value =value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"
                placeholder="请输入分类名称"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button type="primary" @click="submitFormClass('rulesClass')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTagList,
  gettagCategoryList,
  addtags,
  deltag,
  addtagCategory,
  deltagCategory,
} from "@/api/user/index";
export default {
  data() {
    return {
      submitLoading: false,
      title: "添加标签",
      classTitle: "添加分类",
      dialogLabel: false,
      dialogClass: false,
      loading: false,
      currentPage4: 4,
      TagList: [],
      tagCategoryList: [],
      ruleForm: {
        category_id: "",
        tag_name: "",
        explain:""
      },
      ruleFormClass: {
        category_name: "",
      },
      searchForm: {
        name:'',
        category_id: "",
        page: 1,
        count: 10,
      },
      total: 0,
      rules: {
        category_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("分类不能为空"));
              }
              callback();
            },
            trigger: "chenge",
          },
        ],
        tag_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("标签名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
      rulesClass: {
        category_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("分类名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getListWay();
    this.gettagCategoryListWay();
  },
  methods: {
    resetting(){
      this.searchForm.page = 1;
      this.searchForm.count = 10;
      this.searchForm.category_id = "";
      this.searchForm.name = "";
      this.getListWay();
    },
    getListWay() {
      this.loading = true;
      getTagList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200) {
          this.$messages.error(res.msg);
          return;
        }
        this.TagList = res.data.list;
        this.total = res.data.total;
      });
    },
    gettagCategoryListWay() {
      gettagCategoryList().then((res) => {
        if (res.code !== 200) {
          this.$messages.error(res.msg);
          return;
        }
        this.tagCategoryList = res.data.list;
      });
    },
    // 删除标签
    deltagsWay(row) {
      deltag({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    // 修改
    puttagsWay(row) {
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.title = "修改标签";
      this.dialogLabel = true;
    },
    // 打开弹框
    addLabel() {
      this.ruleForm.category_id = this.searchForm.category_id;
      this.dialogLabel = true;
      this.title = "添加标签";
    },
    // 关闭弹框
    CloseDialogLabel() {
      this.ruleForm = {
        category_id: "",
        tag_name: "",
      };
      this.ruleFormClass = {
        category_name: "",
      };
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
      }
      if (this.$refs.rulesClass) {
        this.$refs.rulesClass.resetFields();
      }
      this.dialogLabel = false;
      this.dialogClass = false;
    },
    // 切换分类
    tagCategoryWay(id) {
      if (!id) {
        this.searchForm.category_id = "";
      } else {
        this.searchForm.category_id = id;
        this.ruleForm.category_id = id;
      }
      this.searchForm.page = 1;
      this.getListWay();
    },
    // 提交
    submitForm(formName) {
      var _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.submitLoading = true;
          addtags(_this.ruleForm).then((res) => {
            _this.submitLoading = false;
            if (res.code !== 200) {
              _this.$messages.error(res.msg);
              return;
            }
            _this.CloseDialogLabel();
            _this.getListWay();
          });
        } else {
          return false;
        }
      });
    },
    addClassWay() {
      this.dialogClass = true;
      this.classTitle = "添加分类";
    },

    // 修改分类
    putClassWay(row) {
      this.ruleFormClass = JSON.parse(JSON.stringify(row));
      this.classTitle = "修改分类";
      this.dialogClass = true;
    },

    // 删除分类
    delClassWay(row) {
      var _this = this;
      deltagCategory({ id: row.id }).then((res) => {
        if (res.code == 200) {
          _this.gettagCategoryListWay();
          this.$messages.success("删除成功");
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    submitFormClass(formName) {
      var _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {

          addtagCategory(_this.ruleFormClass).then((res) => {

            if (res.code !== 200) {
              _this.$messages.error(res.msg);
              return;
            }
            this.$messages.success("操作成功");
            _this.CloseDialogLabel();
            _this.gettagCategoryListWay();
          });
        } else {
          return false;
        }
      });
    },

    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
  },
};
</script>

<style lang="scss" scoped>
  .warningtips{
    margin-bottom: 30px;
    color: #333;
    background-color: #d4e3fc;
    font-weight: 600;
    font-size: 12px;
    padding: 15px 10px 15px 10px;
  }
.app-container {
  .Label {
  }

  .leftLabel {
    min-width: 200px;
    // max-height: 80vh;
    // min-height: 60vh;
    display: flex;

    .each {
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      font-size: 14px;
      margin-right:20px;

      .right {
        transition: 0.3s;
        display: none;
        float: right;
        font-size: 700;
      }
    }

    .each:hover {
      .right {
        display: inline-block;
      }
    }

    .isEach {
      position: relative;
      // background-color: #eff6fe;
      color: #2d8cf0;
      // border-bottom:3px solid #2d8cf0;
      margin-right:20px;
      font-weight:550;
    }

    // .isEach::after {
    //   content: "";
    //   position: absolute;
    //   height: 100%;
    //   width: 2px;
    //   background-color: #2d8cf0;
    //   bottom: 0px;
    //   right: 0px;
    // }
  }

  .rightLabel {
    flex: 1;
    // border-left: 1px solid #ededed;
    padding: 20px;
  }
}
</style>
<style>
.el-card__body {
  padding: 0;
}

.el-tabs__content {
  display: none;
}
</style>
